<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      透传 Attribultes 

        概念：
          1. 传递给组件的属性，如果没有被组件 props 选项声明的话，那么该属性就是一个 Attr
              <Hello initialCount="1" name="张三" age="18" sex="男" />

              {
                props: ['initialCount', 'sex']
              }

              prop: initialCount , sex
              attr: name , age

          2. 
            组件内有一个 $props 对象，里面收集的是所有 prop
            组件内有一个 $attrs 对象，里面收集的是所有 attr
              Vue3 中，组件上绑定的事件没有被 emits 声明的话，该事件也会收集到 $attrs 中
              Vue2 中，组件上绑定的事件，不会被收集到 $attrs 中，而是一个单独的 $listners 中
                
   -->

    <div id="app"></div>

    <script src="../lib/vue2.js"></script>
    <script>
      const Root = {
        data() {
          return {
            fruits: ["Orange", "Apple", "Banana"],
          };
        },

        template: `
          <div>
            <h1>Root</h1>

            <Hello class="box2" initialCount="1" name="张三" age="18" sex="男" @abcd="" />
          </div>
        `,
      };

      const Hello = {
        inheritAttrs: false, // 禁用 attrs 数据的继承

        props: ["initialCount", "sex"],

        data() {
          return {
            count: this.initialCount,
          };
        },

        template: `
          <div class="box1">
            <h2>Hello</h2>
            <button @click="count++">{{ count }}</button>
          </div>
        `,

        created() {
          console.log("this.$props", this.$props);
          console.log("this.$attrs", this.$attrs);
          console.log("this.$listeners", this.$listeners);
        },
      };

      // 创建全局组件
      Vue.component("Hello", Hello);

      // 创建应用实例
      const app = new Vue(Root);

      // 挂载应用到挂载点
      app.$mount("#app");
    </script>
  </body>
</html>
